<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Three框架</title>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <style type="text/css">
        html, body {
            margin: 0;
            height: 100%;
        }

        div#canvas-frame {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 100%;
            background-color: #EEEEEE;
        }

        canvas {
            display: block;
        }

    </style>
    <script>
        //渲染器
        var renderer,width,height;
        function initRender() {
            width = document.getElementById('canvas-frame').clientWidth;
            height = document.getElementById('canvas-frame').clientHeight;
            renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setSize(width, height);
            document.getElementById('canvas-frame').appendChild(renderer.domElement);
            renderer.setClearColor(0xffffff, 1.0);
        }

        //相机
        var camera;
        function initCamera() {
            camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
            camera.position.x = 0;
            camera.position.y = 900;
            camera.position.z = 0;

            camera.lookAt(new THREE.Vector3(0,0,0));
        }

        //场景
        var scene;
        function initScene() {
            scene = new THREE.Scene();
        }

        //光源
        var light;
        function initLight() {
            light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
            light.position.set(100, 100, 200);
            scene.add(light);
        }

        //模型
        function initModel() {

            //轴辅助 （每一个轴的长度）
            var object = new THREE.AxesHelper(500);
            scene.add(object);

            var geometry = new THREE.Geometry();
            geometry.vertices.push(new THREE.Vector3(-500, 0, 0));
            geometry.vertices.push(new THREE.Vector3(500, 0, 0));

            for (var i = 0; i <= 20; i++) {

                var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: randomColor(), opacity: 1}));
                line.position.z = ( i * 50 ) - 500;
                scene.add(line);

                var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: randomColor(), opacity: 1}));
                line.position.x = ( i * 50 ) - 500;
                line.rotation.y = 90 * Math.PI / 180;
                scene.add(line);

            }

            console.log(scene);
        }

        //绘制
        function draw() {
            initRender();
            initCamera();
            initScene();
            initLight();
            initModel();
            renderer.render(scene, camera);
        }

        //生成随机颜色
        function randomColor() {
            var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"],
                strHex = "0x",
                index;
            for (var i = 0; i < 6; i++) {
                index = Math.round(Math.random() * 15);
                strHex += arrHex[index];
            }
            return eval(strHex);
        }


    </script>
</head>

<body onload="draw();">
<div id="canvas-frame"></div>
</body>
</html>